<template>
  <div class="box">
    <Switch size="large" v-model="editor" @on-change="switchMode">
      <template #open>
        <span>预览</span>
      </template>
      <template #close>
        <span>编辑</span>
      </template>
    </Switch>
    <Switch style="margin-left: 10px" size="large" v-model="state.ruler" @on-change="switchRuler">
      <template #open>
        <span>网格</span>
      </template>
      <template #close>
        <span>网格</span>
      </template>
    </Switch>
  </div>
</template>

<script setup name="Drag">
import { storeToRefs } from 'pinia';
import useSelect from '@/hooks/select';
import editorStore from '@/store/editor';
const editorStorer = editorStore();
let { state } = storeToRefs(editorStorer);

const editor = ref(true);
const { canvasEditor } = useSelect();

const switchMode = (val) => {
  val ? canvasEditor.endDring() : canvasEditor.startDring();
};
const switchRuler = (val) => {
  if (val) {
    canvasEditor.rulerEnable();
  } else {
    canvasEditor.rulerDisable();
  }
};
</script>
<style scoped lang="less">
.box {
  position: absolute;
  right: 193px;
  bottom: 14px;
}
</style>
